import ReactEcharts from 'echarts-for-react'
import * as echarts from 'echarts'
import merge from 'lodash.merge'
import clonedeep from 'lodash.clonedeep'

import '../tooltip.less'

const Line: React.FC = (props: object) => {
    const defaultSeries: any = {
        // 普通线条
        normalLine: {
            type: 'line',
            showSymbol: false,
            symbol: 'none',
        },
        // 渐变线条的默认设置
        gradientLine: {
            type: 'line',
            symbol: 'none',
            areaStyle: {
                color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                        {
                            offset: 0,
                            color: 'rgba(71, 164, 248, .5)', // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: 'transparent', // 100% 处的颜色
                        },
                    ],
                    false,
                ),
            },
            lineStyle: {
                color: '#47A4F8',
            },
        },
        // 虚线线条的默认设置
        dottedLine: {
            type: 'line',
            color: '#30D8FF',
            showSymbol: false,
            smooth: true,
            lineStyle: {
                type: 'dashed',
            },
        },
    }
    const defaultOption: any = {
        normal: {
            legend: {
                show: true,
                left: 'center',
                top: 16,
                textStyle: {
                    color: 'rgba(255,255,255,1)',
                    fontSize: 14,
                },
                icon: 'rect',
                itemWidth: 24,
                itemHeight: 3,
                itemGap: 40,
            },
            color: ['#4BF3FF', '#fff', '#37E7B6'],
            tooltip: {
                padding: 12,
                trigger: 'axis',
            },
            grid: {
                left: 50,
                right: 20,
                bottom: 30,
                top: 90,
                containLabel: true,
            },
            xAxis: {
                type: 'category',
                boundaryGap: true,
                axisTick: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.5)',
                    },
                },
                axisLabel: {
                    fontSize: 14,
                    padding: [10, 0, 0, 0],
                    color: 'rgba(255, 255, 255, 0.9)',
                },
            },
            yAxis: {
                nameTextStyle: {
                    fontSize: 14,
                    padding: [0, 70, 10, 0],
                    color: 'rgba(255, 255, 255, 0.9)',
                },
                type: 'value',
                axisLabel: {
                    fontSize: 14,
                    padding: [0, 16, 0, 0],
                    color: 'rgba(255, 255, 255, 0.9)',
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0)',
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.5)',
                    },
                },
            },
        },
    }
    const mergeOption = (option: any = {}) => {
        const newOption = merge(
            {},
            defaultOption[option.styleType || 'normal'],
            option,
        )
        return newOption
    }

    const mergeSerie = (serie: any = {}) => {
        const newSerie = merge(
            {},
            defaultSeries[serie.styleType || 'normalLine'],
            serie,
        )
        return newSerie
    }

    const chartOptionMerge = () => {
        const propsOption = props.option || {}
        if (propsOption.series && propsOption.series.length) {
            propsOption.series = propsOption.series.map((item: any) => {
                item = mergeSerie(item)
                return item
            })
        }
        const option = mergeOption(propsOption)
        return option
    }
    return (
        <ReactEcharts
            echarts={echarts}
            {...props}
            option={clonedeep(chartOptionMerge())}
        />
    )
}

export default Line
